import React, { useEffect } from 'react';
import { menuConfig } from '@/config/menuConfig';
import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
import App from './App';
import VisualEditing from './Visual.editing';

const Route_index = () => {
  const location = useLocation();
  const navigate = useNavigate();
  useEffect(() => {
    const pathname = location.pathname;
    if (pathname === '/') {
      navigate('/DiscoverMusic');
    }
  }, []);
  const renderRoute = (data) => {
    return data.map((item, key) => {
      if (item.children) {
        return (
          <Route key={item.path} path={item.path} element={<item.component />}>
            {renderRoute(item.children)}
          </Route>
        );
      }
      if (Array.isArray(item.path)) {
        return renderRoute(item.path);
      }
      return <Route key={item.path} path={item.path} element={<item.component />}></Route>;
    });
  };
  return (
    <>
      <Routes>
        <Route path="/" element={<App />}>
          {renderRoute(menuConfig)}
        </Route>
        <Route path="/VisualEditing" element={<VisualEditing />}></Route>
      </Routes>
    </>
  );
};

export default Route_index;
